<template>
 <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem>展位管理</BreadcrumbItem>
      </Breadcrumb>
      <div class="kui-desk-act">
        <Button class="kui-act-btn" v-show =" this.$store.state.userInfo.rid === 1" type="primary" style="margin-left:5px;" size="small" @click="$router.push({path:'/booth/add'})">新增展位</Button>
      </div>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-bd kui-table-panel">
            <div class="kui-table-sc">
              <Form class="kui-form-panel" ref="searchForm" inline :v-model="searchVal">
                <FormItem>
                  <Input v-model="searchVal.no" clearable placeholder="请输入编号"/>
                </FormItem>
                <FormItem>
                  <Select v-model="searchVal.state" clearable style="width:160px" placeholder="请选择状态">
                      <Option :value="1">空闲</Option>
                      <Option :value="2">租赁中</Option>
                      <Option :value="3">预定中</Option>
                      <Option :value="-1">待修</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Select v-model="searchVal.area" clearable style="width:160px" placeholder="请选择区域">
                      <Option v-for="(item, index) of regionOption" :key="index" :value="item.value">{{item.label}}</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Select v-model="searchVal.cate" clearable style="width:160px" placeholder="请选择类型">
                      <Option v-for="(item, index) of typeOption" :key="index" :value="item.value">{{item.label}}</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Input v-model="searchVal.address" clearable placeholder="请输入地址"/>
                </FormItem>
                <FormItem>
                  <Button @click="searchFun" icon="ios-search">搜索</Button>
                </FormItem>
                <FormItem>
                  <Button @click="searchReset">重置</Button>
                </FormItem>
              </Form>
            </div>
            <div class="kui-table-hd kui-flex kui-flex-between kui-flex-middle">
              <Button class="kui-hd-btn" type="error" size="small" @click="allDelete">删除所选数据</Button>
              <span>共{{ total }}条数据</span>
            </div>
            <Table class="kui-table-bd"
                   ref="selection"
                   border
                   :columns="tabTitle"
                   :data="tabData"
                   @on-selection-change="clickSelect"></Table>
            <div class="kui-table-ft" v-if="total">
              <Page class="kui-page-current"
                    :total="total"
                    :page-size="20"
                    size="small"
                    @on-change="clickPages">
              </Page>
            </div>
          </div>
        </div>
      </div>
    </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      tabTitle: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: 'ID',
          key: 'id',
          width: 100,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位编号',
          width: 120,
          key: 'no',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '所属分类',
          width: 100,
          key: 'cate',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '所在区域',
          key: 'area',
          width: 100,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位规格',
          width: 120,
          key: 'spec',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '详细地址',
          width: 200,
          key: 'address',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '客户名称',
          width: 120,
          key: 'customer_name',
          align: 'center',
          ellipsis: 'true',
          render: (h, parent) => {
           return h('div', [
              h(
                'Span',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '12px'
                  },
                  on: {
                    click: () => {
                      this.customerBtn(parent.row.customer_id)
                    }
                  }
                },
                parent.row.customer_name
              )])
          }

        },
        {
          title: '状态标识',
          key: 'state',
          align: 'center',
          width: 120,
          render: (h, params) => {
            if( params.row.state === 1 ) {
              return h('Tag', '空闲中')
            }else if( params.row.state === 2 ) {
               return h('Tag', '使用中')
            }else if( params.row.state === 3 ) {
               return h('Tag', '预定中')
            }else if( params.row.state === -1 ) {
               return h('Tag', '待维修')
            }
          }
        },
        {
          title: '录入者',
          width: 120,
          key: 'author',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '备注信息',
          key: 'info',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          fixed: 'right',
          align: 'center',
          render: (h, parent) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '12px'
                  },
                  on: {
                    click: () => {
                      this.jumpBtn(parent.row.id)
                    }
                  }
                },
                '查看'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickDelete(parent.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tabData: [],
      total: null,
      selectedArr: [],
      temporaryData: {}, //修改数据临时存放
      searchVal: {},  //搜索临时存放
      regionOption:[], //区域搜索选项
      typeOption: [], //类型搜索选项
      state: false
    }
  },
  methods: {
    //获取数据
    async getData(page) {
      const app = this
      let { data } = await app.$axios.get('/master/v1/board',{
          params: {
            page,
            state: app.$route.query.state
          }
        })
        // 清除路由传参
        this.$router.push({go:'/booth'})
      if (data.code === 100) {
        app.tabData = data.result.data
        app.total = data.result.total
      }
    },
    //搜索数据
    async searchData(page) {
      const app = this
        let { data } = await app.$axios.get('/master/v1/board', {
          params: {
            page,
            ...app.searchVal
          }
        })
        if (data.code === 100) {
          app.tabData = data.result.data
          app.total = data.result.total
        } else {
          app.$Message.error(data.msg)
        }
    },
    // 清除搜索
    searchReset() {
      this.state = false
      this.searchVal = {}
      this.getData(1)
    },
    //区域搜索选项
    async regionOptionData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'area'}
      })
      if(data.code === 100){
        app.regionOption = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
    //类型搜索选项
    async typeOptionData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'cate'}
      })
      if(data.code === 100){
        app.typeOption = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
    //修改数据
    async putData(id) {
      const app = this
      let { data } = await app.$axios.put(`/master/v1/user/${id}`, app.temporaryData)
      if(data.code === 100){
        this.getData(1)
        app.$Message.success(data.msg)
      }else{
        app.$Message.error(data.msg)
      }
    },
    //删除数据
    async deleteData(ids) {
      const app = this
      let { data } = await app.$axios.delete('/master/v1/des/board', {
        data: { ids }
      })
      if (data.code === 100) {
        this.getData(1)
        this.selectedArr = []
        app.$Message.success(data.msg)
      }else{
        app.$Message.error(data.msg)
      }
    },
    //删除弹窗
    clickDelete (id) {
      const app = this
      let ids = [ id ]
      app.$Modal.confirm({
        title: '确认删除',
        content: '你正在删除，是否继续？',
        onOk: () => {
          this.deleteData(ids)
        }
      })
    },
    //获取选中数据
    clickSelect(row) {
      this.selectedArr = row.map(item => {
        return item.id
      })
    },
    //删除选中数据操作
    allDelete() {
      const app = this
      if (app.selectedArr.length !== 0) {
        app.$Modal.confirm({
          title: '确认删除',
          content: '你正在批量删除，是否继续？',
          onOk: () => {
            this.deleteData(this.selectedArr)
          }
        })
      } else {
        app.$Message.error('请选择操作对象！')
      }
    },
    //翻页操作
    clickPages(page) {
      this.state ? this.searchData(page) : this.getData(page)
    },
    // 路由跳转
    jumpBtn(id) {
      this.$router.push({
          path:'/booth/info',
          query: {
            id: id
          }
        })
    },
    // 跳转客户详情页
    customerBtn(id) {
        this.$router.push({
          path:'/customer/info',
          query: {
            id: id
          }
        })
    },
    //搜索操作
    searchFun() {
      this.searchData(1)
      this.state = true
    }
  },
  created() {
    this.getData(1)
    this.regionOptionData()
    this.typeOptionData()

  }
}
</script>

<style lang="less" scoped></style>
